<!-- 个人主页详情页 -->
<template>
  <div id="personal">
    <van-nav-bar left-arrow fixed @click-left="onClickLeft">
      <template #right>
        <van-icon name="share-o" />
      </template>
    </van-nav-bar>
    <!-- 设置的背景图片 -->
    <div>
      <van-image
          src="/images/personalBackground/background.jpg"
          fit="contain"
      />
    </div>

    <!-- 内容 -->
    <div class="outside">
      <!-- 内容顶部数据,包括头像 -->
      <div class="top">
        <div>
          <span>200</span>
          <span style="color: #acacac">获赞</span>
        </div>
        <div>
          <span>311</span>
          <span style="color: #acacac">赞同</span>
        </div>

        <div style="width: 120px; height: 110px"></div>

        <!-- 头像 -->
        <div class="head_portrait">
          <van-image
              round
              width="100px"
              height="100px"
              :src="userinfo.avater"
              fit="cover"
          />
          <span>{{userinfo.username}}</span>
        </div>

        <div>
          <span>6</span>
          <router-link :to="{path: '/homeview/my/mypage/personalPage/follow',
          query: {
            active: 0,
          }}">
            <span style="color: #acacac">关注</span>
          </router-link>
        </div>
        <div>
          <span>6</span>
          <router-link :to="{path: '/homeview/my/mypage/personalPage/follow',
          query: {
            active: 1,
          }}">
            <span style="color: #acacac">获关</span>
          </router-link>
        </div>
      </div>

      <!-- 介绍自己和积分的外层包裹 -->
      <div class="self_out">
        <!-- 介绍自己 -->
        <van-field
            v-model="selfIntroduction"
            placeholder="介绍下自己吧!"
            autosize
            right-icon="edit"
            maxlength="21"
            clearable
            class="introduction"
        />

        <!-- 积分部分 -->
        <div class="scorecard">
          <div>
            <P
            >拥有积分:
              <span >{{this.score}}</span></P
            >
          </div>
          <div class="scorecard_go">
            <router-link :to="{
              path: '/iphoneStore',
            }">
              <span>前往使用</span>
            </router-link>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>

      <!-- 标签页内容 -->
      <van-tabs v-model="active" @click="getList"  >
        <van-tab :title="areas[0].content" :name="areas[0].id"   >
          <van-panel :title="share.title" v-for="(share,index) in sharePage">
            <router-link
                :to="{
                path: '/homeview/share/sharepage/sharedetails',
                query:{
                  userId: userinfo.id,
                  articleId: share.articleId,
                  moduleId: share.moduleId,
                  url: images[0].url[(index+1)%9-1],
                }
              }"
            >
              <van-icon name="arrow" style="float: right" />
            </router-link>
            <div style="padding-left: 16px">
              <p style="margin: 6px auto">
                <van-image
                    round
                    width="1.5rem"
                    height="1.5rem"
                    :src="userinfo.avater"
                />
                <span style="font-size: 20px; vertical-align: top">{{
                    userinfo.username
                  }}</span>
              </p>
            </div>

            <div style="padding-left: 16px" class="van-multi-ellipsis--l2">
              {{ share.content }}
            </div>
            <div
                style="
                display: flex;
                height: 200px;
                width: 200px;
                padding-left: 16px;
              "
            >
              <img :src="images[0].url[(index+1)%9-1]" />
            </div>

            <template #footer>
              <van-icon name="like-o" color="red" v-if="isClick" />
              <van-icon name="like-o" v-else />
              <span class="span">{{ share.articleLike }}</span>
              <van-icon name="star-o" color="#ffcc00" v-if="isClick" />
              <van-icon name="star" color="orange" v-else />
              <span class="span">{{ share.articleCollection }}</span>
              <van-icon name="chat-o" />
              <span class="span">{{ share.articleComment }}</span>
              <van-icon name="share-o" @click="showShare = true" />
              <span class="span">{{ share.articleVisit }}</span>
            </template>
          </van-panel>

          <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select="onSelect"
          />
        </van-tab>

        <van-tab :title="areas[1].content" :name="areas[1].id" >
          <van-panel :title="help.helpTitle" v-for="(help,index) in HelpPage">
            <router-link
                :to="{
                path: '/homeview/help/helppage/helpdetails',
                query: {
                  userId: userinfo.id,
                  helpId: help.helpId,
                  moduleId: help.moduleId,
                },
              }"
            >
              <van-icon name="arrow" style="float: right" />
            </router-link>
            <div style="padding-left: 16px">
              <p style="margin: 6px auto">
                <van-image
                    round
                    width="1.5rem"
                    height="1.5rem"
                    :src="userinfo.avater"
                />
                <span style="font-size: 20px; vertical-align: top">{{
                    userinfo.username
                  }}</span>
              </p>
            </div>
            <div style="padding-left: 16px" class="van-multi-ellipsis--l2">
              {{ help.helpContent }}
              <div style="display: flex; height: 200px; width: 200px">
                <img :src="images[1].url[(index+1)%9-1]" />
              </div>
            </div>
            <template #footer>
              <p style="margin: 6px 0 auto">时间:{{help.startTime}}~{{help.endTime}}</p>
              <p style="margin: 6px 0 auto">
                难度:
                <van-rate v-model="help.difficulty" readonly />
              </p>
              <p style="margin: 6px 0 auto">
                <span style="padding-right: 10px"
                >报酬: {{ help.rewardValue }}</span
                >
                |
                <span style="padding-left: 10px"
                >报酬类型: {{ help.rewardType }}</span
                >
              </p>
            </template>
          </van-panel>
        </van-tab>

        <van-tab :title="areas[2].content" :name="areas[2].id">
          <van-panel :title="like.title" v-for="(like,index) in LikePage">
            <router-link
                :to="{
                path: '/homeview/share/sharepage/sharedetails',
                query:{
                  userId: userinfo.id,
                  articleId: like.articleId,
                  moduleId: like.moduleId,
                  url: images[2].url[(index+1)%9-1],
                }
              }"
            >
              <van-icon name="arrow" style="float: right" />
            </router-link>
            <div style="padding-left: 16px">
              <p style="margin: 6px auto">
                <van-image
                    round
                    width="1.5rem"
                    height="1.5rem"
                    :src="userinfo.avater"
                />
                <span style="font-size: 20px; vertical-align: top">{{
                    userinfo.username
                  }}</span>
              </p>
            </div>

            <div style="padding-left: 16px" class="van-multi-ellipsis--l2">
              {{ like.content }}
            </div>
            <div
                style="
                display: flex;
                height: 200px;
                width: 200px;
                padding-left: 16px;
              "
            >
              <img :src="images[2].url[(index+1)%9-1]" />
            </div>

            <template #footer>
              <van-icon name="like-o" color="red" v-if="isClick" />
              <van-icon name="like-o" v-else />
              <span class="span">{{ like.articleLike }}</span>
              <van-icon name="star-o" color="#ffcc00" v-if="false" />
              <van-icon name="star" color="orange" v-else />
              <span class="span">{{ like.articleCollection }}</span>
              <van-icon name="chat-o" />
<!--              <span class="span">{{ like.articleComment }}</span>
              <van-icon name="share-o" @click="showShare = true" />-->
              <span class="span">{{ like.articleVisit }}</span>
            </template>
          </van-panel>
        </van-tab>

        <van-tab :title="areas[3].content" :name="areas[3].id">
          <van-panel :title="waitHelp.helpTitle" v-for="(waitHelp,index) in WaitHelpPage">
            <router-link
                :to="{
                path: '/homeview/help/helppage/helpdetails',
                query: {
                  userId: userinfo.id,
                  helpId: waitHelp.helpId,
                  moduleId: waitHelp.moduleId,
                },
              }"
            >
              <van-icon name="arrow" style="float: right" />
            </router-link>
            <div style="padding-left: 16px">
              <p style="margin: 6px auto">
                <van-image
                    round
                    width="1.5rem"
                    height="1.5rem"
                    :src="userinfo.avater"
                />
                <span style="font-size: 20px; vertical-align: top">{{
                    userinfo.username
                  }}</span>
              </p>
            </div>
            <div style="padding-left: 16px" class="van-multi-ellipsis--l2">
              {{ waitHelp.helpContent }}
              <div style="display: flex; height: 200px; width: 200px">
                <img :src="images[3].url[(index+1)%9-1]" />
              </div>
            </div>
            <template #footer>
              <p style="margin: 6px 0 auto">时间:{{ waitHelp.startTime }}~{{ waitHelp.endTime}}</p>
              <p style="margin: 6px 0 auto">
                难度:
                <van-rate v-model="waitHelp.difficulty" readonly />
              </p>
              <p style="margin: 6px 0 auto">
                <span style="padding-right: 10px"
                >报酬: {{ waitHelp.rewardValue }}</span
                >
                |
                <span style="padding-left: 10px"
                >报酬类型: {{ waitHelp.rewardType }}</span
                >
              </p>
            </template>
          </van-panel>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {mapState} from "vuex";
export default {
  // name1: "Share",
  // name2: "HelpPage",
  data() {
    return {
      areas: [
          {id: 0,content: "分享"},
          {id: 1,content: "求助"},
          {id: 2,content: "收藏"},
          {id: 3,content: "待帮助"}
      ],
      role: {
          avatar: null
      },
      selfIntroduction: null,
      active: 0,
      value: 2,
      // 分享页假数据
      sharePage: [{
        title: "脑洞求解",
        content:
            "Cell 可以单独使用，也可以与 CellGroup 搭配使用,CellGroup 可以为 Cell 提供上下外边框。",
        url: "https://s1.328888.xyz/2022/09/05/1x2ro.png",
        avatar: "https://s1.328888.xyz/2022/09/05/1x2ro.png",
        likeCount: "500",
        collection: "566",
        commentCount: "253",
        forward: "243",
      }],
      // 求助页假数据
      HelpPage: [{
        id: 0,
        title: "找猫",
        content: "阿鸡家的猫丢失了，目前失联好多天，猫是只花猫，阿鸡家在天桥之上",
        period: "2022/7/25 8:00--2023/7/25 8:00",
        difficulty: "2",
        url: "https://s1.328888.xyz/2022/09/05/1xc40.png",
        nickName: "吕易",
        avatar: "https://s1.328888.xyz/2022/09/05/1xc40.png",
        rewardValue: "20",
        rewardType: "积分",
      }],
      // 赞同页假数据
      LikePage: {
        title: "题目",
        content:
            "Cell 可以单独使用，也可以与 CellGroup 搭配使用,CellGroup 可以为 Cell 提供上下外边框。",
        url: "https://s1.328888.xyz/2022/09/05/1xc40.png",
        likeCount: "500",
        commentCount: "253",
      },
      //待帮助
      WaitHelpPage: {
        id: 0,
        title: "恋爱分享",
        content: "情之所投，意之所向，有情可成眷属",
        period: "2022/7/25 8:00--2023/7/25 8:00",
        difficulty: "2",
        url: "https://s1.328888.xyz/2022/09/05/1xCti.jpg",
        nickName: "吕易",
        avatar: "https://s1.328888.xyz/2022/09/05/1xCti.jpg",
        rewardValue: "20",
        rewardType: "积分",
      },
      //图片
      images:[
          {id: 0,url: [
          'https://s1.328888.xyz/2022/09/05/1xwmJ.jpg',
            'https://s1.328888.xyz/2022/09/05/1xG1w.jpg',
            'https://s1.328888.xyz/2022/09/05/1xCti.jpg',
            'https://s1.328888.xyz/2022/09/05/1xo2p.png',
            'https://s1.328888.xyz/2022/09/05/1x2ro.png',
            'https://s1.328888.xyz/2022/09/05/1xVDF.png',
            'https://s1.328888.xyz/2022/09/06/5hIBs.jpg',
            'https://s1.328888.xyz/2022/09/06/5hJty.jpg'
        ]},
        {id: 1,url: [
          'https://s1.328888.xyz/2022/09/05/1xBrE.png',
          'https://s1.328888.xyz/2022/09/05/1xc40.png',
          'https://s1.328888.xyz/2022/09/05/1xs1S.png',
          'https://s1.328888.xyz/2022/09/05/1xMy5.png',
          'https://s1.328888.xyz/2022/09/05/1xPvN.png',
          'https://s1.328888.xyz/2022/09/05/1xgby.png',
          'https://s1.328888.xyz/2022/09/06/5h3WK.jpg',
          'https://s1.328888.xyz/2022/09/06/5hGYk.jpg',
          'https://s1.328888.xyz/2022/09/06/5h1ew.jpg',
          'https://s1.328888.xyz/2022/09/06/5hx1N.jpg',
          'https://s1.328888.xyz/2022/09/06/5htdC.jpg',
          'https://s1.328888.xyz/2022/09/06/5hzBd.jpg'
        ]},
        {id: 2,url: [
          'https://s1.328888.xyz/2022/09/22/ICKAF.jpg',
          'https://s1.328888.xyz/2022/09/22/IC9go.jpg',
          'https://s1.328888.xyz/2022/09/22/ICo4S.jpg',
          'https://s1.328888.xyz/2022/09/22/IC2I5.jpg',
          'https://s1.328888.xyz/2022/09/22/ICM5C.jpg',
          'https://s1.328888.xyz/2022/09/22/ICsDy.jpg',
          'https://s1.328888.xyz/2022/09/22/ICPyd.jpg',
          'https://s1.328888.xyz/2022/09/22/ICfvU.jpg',
          'https://s1.328888.xyz/2022/09/22/ICUgR.png',
          'https://s1.328888.xyz/2022/09/22/IC8wB.jpg',
        ]},
        {id: 3,url: [
            'https://s1.328888.xyz/2022/09/22/ICS5r.jpg',
            'https://s1.328888.xyz/2022/09/22/ICezK.jpg',
            'https://s1.328888.xyz/2022/09/22/ICHEm.jpg',
            'https://s1.328888.xyz/2022/09/22/ICq8k.jpg',
            'https://s1.328888.xyz/2022/09/22/ICpw7.jpg',
            'https://s1.328888.xyz/2022/09/22/ICn6J.jpg',
            'https://s1.328888.xyz/2022/09/22/ICXRE.jpg',
            'https://s1.328888.xyz/2022/09/22/ICiFg.jpg',
            'https://s1.328888.xyz/2022/09/22/ICRHi.jpg',
            'https://s1.328888.xyz/2022/09/22/ICW9h.jpg'
          ]},

      ],
      // 身份信息
      poster: {
        nickName: "吕易",
        avatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
      },

      currentPage: 1,
      isClick: true,
      showShare: false,

      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      score: null
    };
  },
  computed: {
    ...mapState(['userinfo'])
  },
  created() {
    //头像
    /*this.role.avatar = this.$route.query.url*/
    console.log(this.$route.query.url)
    console.log("userinfo",this.userinfo)
    //发送文章列表请求
    this.axios.get("http://localhost:10004/article/list/"+this.userinfo.id+"/"+1).then(response => {
      if(response.data.state==200){
        console.log("分享列表",response.data.data)
        this.sharePage = response.data.data
      }else{
        console.log("服务器慢")
      }
    })
    //积分获取请求
    this.axios.get("http://localhost:10002/ums/userDetail/score/"+
    this.userinfo.id).then(response =>{
      if(response.data.state==200){
        this.score = response.data.data
        console.log("积分",response.data.data)
      }else {
        console.log("意外",response.data.data)
      }
    })
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    //分享列表获取
    getList(name, title){
      switch (name){
        case 0:
          this.axios.get("http://localhost:10004/article/list/"+this.userinfo.id+"/"+1).then(response => {
            if(response.data.state==200){
              console.log("分享列表",response.data.data)
              this.sharePage = response.data.data
            }else{
              console.log("服务器慢")
            }
          })
            this.active=0
              break;
        case 1:
          this.active=1
            console.log("求助模块",name)
            this.axios.get("http://localhost:10005/cooperation/list/"+this.userinfo.id+"/"+1).then(
                response =>{
                  if(response.data.state==200){
                    this.HelpPage = response.data.data
                    console.log("数据：",response.data.data)
                  }else {
                    Toast("服务器忙")
                    console.log("服务器忙")
                  }
                }
            )
              break;
        case 2:
          this.axios.get("http://localhost:10004/article/list/"+this.userinfo.id+"/"+1).then(response => {
            if(response.data.state==200){
              console.log("分享列表",response.data.data)
              this.LikePage = response.data.data
            }else{
              console.log("服务器慢")
            }
          })
          this.active=2
          console.log("收藏模块",name)

          break;
        case 3:
          this.active=3
            this.axios.get("http://localhost:10005/apply/list/"+this.userinfo.id+"/"+1)
                .then(response =>{
                  if(response.data.state==200){
                    Toast("获取成功")
                    this.WaitHelpPage = response.data.data
                    console.log("待帮助数据",response.data.data)
                  }else{
                    console.log("获取失败",response.data.data)
                  }
                })
          break;
      }
    }
  },
};
</script>

<style scoped>
/* 去除导航栏底边白边 */
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}

/* 固定位置 */
#personal {
  margin: 0;
  padding: 0;
  position: relative;
}

/* 最外层div */
.outside {
  position: absolute;
  display: inline-block;
  top: 197px;
  width: 100%;
  background-color: white;
  border-radius: 10px 10px 0px 0px;
}

/* 内容顶部头像及数据 */
.top {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top div span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 8px;
}
/* 头像位移参数 */
.head_portrait {
  position: absolute;
  display: inline-block;
  top: -50px;
}
.head_portrait span {
  font-size: 23px;
  font-weight: bold;
}

/* 介绍自己和积分的外层包裹 */
.self_out {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 介绍自己 */
.introduction {
  border-radius: 15px;
  border: 1px solid #f3f3f3;
  box-shadow: 2px 3px 2px rgb(226, 222, 222);
}

/* 积分部分 */
.scorecard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px 10px;
  background: linear-gradient(to right, #fcf4b1, #fff178);
  border-radius: 15px;
  border: 1px solid #fff286;
  box-shadow: 2px 3px 2px rgb(226, 222, 222);
}
.scorecard div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.scorecard div p {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.scorecard div p span {
  line-height: 18px;
  padding-top: 4px;
  padding-left: 6px;
  font-size: 18px;
  font-weight: bold;
  color: #ff8d1a;

}
.scorecard_go {
  font-size: 13px;
  color: #acacac;
}

/* 下方内容栏 */
.vcg {
  margin-bottom: 16px;
}
.span {
  padding-right: 20px;
}
.vp {
  width: 300px;
  float: right;
}
.van-cell {
  font-size: 18px;
}
</style>